<template>
  <div class="com-card card2">
    <div class="card_title">清科中国股权投资市场2022年度机构有限合伙人排名调研问卷</div>
    <div class="edit">
      <el-button type="primary_plain" size="small"><i class="iconfont icon-a-shujudaorumobanimporttemplate"></i>数据导入模板</el-button>
      <el-upload
        action="https://jsonplaceholder.typicode.com/posts/"
        :before-upload="fileBeforeUpload"
        :on-success="fileOnSuccess"
        :on-error="fileOnError"
        multiple
        :limit="1"
        :file-list="fileList">
        <el-button type="primary_plain" size="small" v-loading="loading_import"><i class="iconfont icon-a-shujudaoruDataimport"></i>数据导入</el-button>
      </el-upload>
      <el-button type="primary_plain" size="small"><i class="iconfont icon-a-shujudaochuDataexport"></i>数据导出</el-button>
    </div>
    <div class="msk">
      <i></i>
      请通过<a>数据导入</a>功能导入数据
    </div>
  </div>
</template>

<script>
export default {
  name: "OptTmpl",
  data() {
    return {
    };
  },

  methods: {
  },
  created() {
  },
};
</script>      
<style lang="scss" scoped>
 .card2{
    position: relative;
    padding: 30px;
    color: #222;
    .card_title{
      line-height: 28px;
      font-size: 20px;
      font-weight: bold;
    }
    .edit{
      position: absolute;
      right: 20px;
      top: 20px;
      display: flex;
      gap: 10px;
      .el-button{
        padding: 7px 15px;
        :deep(span) {
          display: flex;
          align-items: center;
          gap: 6px;
        }
      }
      
    }
    .msk{
      display: flex;
      align-items: center;
      max-width: 1000px;
      height: 46px;
      margin-top: 20px;
      padding: 0 13px;
      background: rgba(27,98,255,0.05);
      border-radius: 4px;
      font-size: 16px;
      i{
        width: 15px;
        height: 20px;
        margin-right: 12px;
        background: url(@/assets/imgs/msk.png) no-repeat;
        background-size: 100%;
      }
    }
  }
</style>